<template>
	<view class="wrapper">
		<view class="module1">
			<image src="../../static/trade/buy/icon1.png" mode=""></image>
			<view>周期驱动股票发起式C(019880)</view>
		</view>
		<view class="module3">
			<view class="m3-1">
				<view class="left">卖出份额 <view class="subtitle">份额x净值=金额</view></view>
				<view class="right redtext">交易规则</view>
			</view>
			<view class="m3-2">
				<input type="text" value="12002.98" placeholder-style="m3-2" placeholder=""/>
				<view class="dl">份</view>
			</view>
			<view class="typenum">
				<view class="numinfo">1/4仓</view>
				<view class="numinfo">1/3仓</view>
				<view class="numinfo">1/2仓</view>
				<view class="numinfo">全仓</view>
			</view>
			<view class="tip">
				<view class="tip-li">
					<view class="v1">卖出费率</view>
					<view class="v2">卖出0费率</view>
				</view>
				<view class="tip-li">
					<view class="v1">到账时间</view>
					<view class="v2">预计 2024-04-12 24点前</view>
				</view>
			</view>
		</view>
		<view class="module4">
			<view class="title">到账方式:</view>
			<view class="content">
				<view class="v1">账户余额</view>
				<view class="v2">预计4月3日24点前到账</view>
			</view>
		</view>
		<view class="module5"><view class="btn">确定</view></view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #F6F6FB;
	}
	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}
	.module1{
		margin: 32rpx auto;
		padding: 0 33rpx;
		height: 92rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8,55,125,0.1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20rpx;
		image{
			width: 26rpx;
			height: 26rpx;
		}
	}
	.module3{
		margin: 0 auto 32rpx;
		padding: 0 33rpx 33rpx;
		min-height: 288rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8,55,125,0.1);
		.m3-1{
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20rpx;
			.left{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 20rpx;
			}
			.right{
				font-size: 24rpx;
				color: #EA0E00;
			}
			.subtitle{
				font-size: 24rpx;
				color: #999999;
				padding: 0 20rpx;
				border-left: 1rpx solid #e5e5e5;
			}
		}
		.m3-2{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 20rpx;
			margin: 25rpx auto 40rpx;
		}
		.m3-2 input{
			width: 30%;
			font-weight: bold;
			font-size: 42rpx;
			color: #999999;
		}
		.typenum{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.numinfo{
				width: 153rpx;
				height: 54rpx;
				line-height: 54rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				border: 1px solid #E5E5E4;
				text-align: center;
			}
		}
		.tip{
			margin: 24rpx auto 0;
			width: 684rpx;
			height: 240rpx;
			box-sizing: border-box;
			padding: 24rpx;
			background: #F6F6FB;
			border-radius: 20rpx;
			.tip-li{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				.v2{
					font-size: 24rpx;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
		
	}
	.module4{
		margin: 0 auto 33rpx;
		padding: 0 33rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8,55,125,0.1);
		.title{
			font-weight: bold;
			font-size: 28rpx;
			color: #262626;
		}
		.content{
			font-size: 28rpx;
			color: #262626;
			.v2{
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	.module5{
		margin-top: 80rpx;
		padding: 0 33rpx;
		.btn{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			color: #fff;
			background: linear-gradient(to right, #004EC2, #08377D);
			border-radius: 20rpx;
		}
	}
</style>